<template>
  <div class="square-process-x">
    <div class="square-process-icon">
      <div>
        <i class="el-icon-circle-check"></i>
      </div>
    </div>
    <div class="square-process-content">
      <div class="square-process-label">
        <span class="square-process-label-txt1">
          {{ source && source.name }}
        </span>
        <span class="square-process-label-txt2">
          {{ source && source.usedPercent }}%
        </span>
      </div>
      <div class="square-process-process">
        <i class="process-decorate"></i>
        <el-progress
          :percentage="(source && source.usedPercent)"
          status="exception"
          :format="format"
          :color="customColor"
          style="width: 100%;"
        ></el-progress>
        <i class="process-decorate"></i>
      </div>
      <div class="square-process-value">
        <span class="square-process-value-txt1">本月使用情况：</span>
        <span class="square-process-value-txt2">
          {{ formatUsed }}
        </span>
        <span class="square-process-value-txt3">核*时</span>
        <span class="square-process-value-txt4">
          {{ formatUsed }}
        </span>
        <span class="square-process-value-txt5">
          /{{ formatTotal }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { NumFormat } from '../utils'

export default {
  name: 'SquareProcess',
  props: {
    source: {
      type: Object,
      default() {
        return {
          name: '集群',
          usedPercent: 12,
          used: 200,
          total: 2400,
        }
      },
    },
  },
  data() {
    return {
      customColor: [{ color: '#fff', percentage: 0 }],
    }
  },
  computed: {
    formatUsed({source}) {
      return NumFormat(source?.used);
    },
    formatTotal({source}) {
      return NumFormat(source?.total);
    }
  },
  methods: {
    format(val) {
      return val
    },
  },
}
</script>

<style scoped>
.square-process-x {
  display: flex;
  width: 100%;
  height: 100%;
}
.square-process-icon {
  margin-left: 5%;
  margin-right: 10%;
  width: 7%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square-process-content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.square-process-icon > div {
  padding: 50%;
  background-color: rgba(255, 255, 255, 0.03);
}
.square-process-icon i {
  font-size: 2rem;
}
.square-process-process {
  width: 100%;
  display: flex;
  align-items: center;
}
.process-decorate {
  width: 0.3125rem;
  height: 0.3125rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.square-process-label {
  display: flex;
}
.square-process-label-txt1 {
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  font-weight: lighter;
  font-family: AlibabaSans, Arial, 'sans-serif';
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: visible;
  margin-right: auto;
  justify-content: flex-start;
  width: auto;
}
.square-process-label-txt2 {
  font-size: 0.75rem;
  color: #d0d2d4;
  font-weight: bolder;
  vertical-align: super;
  font-family: AlibabaSans;
}
.square-process-value {
  display: flex;
  align-items: center;
}
.square-process-value-txt1 {
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  font-weight: lighter;
  font-family: AlibabaSans, Arial, 'sans-serif';
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: visible;
  margin: 0 0.25rem 0 0;
  justify-content: flex-start;
  width: auto;
}
.square-process-value-txt2 {
  background-color: rgba(51, 51, 51, 0);
  display: inline-block;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  height: auto;
  line-height: normal;
  font-size: 0.8125rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  margin-right: 0em;
  border-radius: 0;
  color: #21f1f2;
}
.square-process-value-txt3 {
  font-size: 0.8125rem;
  color: #d0d2d4;
  font-weight: lighter;
  vertical-align: super;
  line-height: 1rem;
  font-family: AlibabaSans;
}
.square-process-value-txt4 {
  background-color: rgba(51, 51, 51, 0);
  display: inline-block;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  height: auto;
  line-height: normal;
  font-size: 0.8125rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  margin-right: 0em;
  margin-left: auto;
  border-radius: 0px;
  color: #21f1f2;
}
.square-process-value-txt5 {
  font-size: 0.75rem;
  color: #d0d2d4;
  font-weight: lighter;
  /* vertical-align: super; */
  font-family: AlibabaSans;
  margin-bottom: -0.1rem;
}
</style>
